<template>
  <view class="bi-content" @click="show = true" :style="{ 'background-image': 'url(' + EnumBG.BCG3 + ')' }">
    <img class="img" :src="EnumBG.BC2" > {{content}}
  </view>

  <view class="bi-commit" @click="landShowUpdate" :class="sizeStatus ? 'bi-commit-big' : 'bi-commit-small'" :style="{ 'background-image': 'url(' + EnumBG.BCG4 + ')' }">
    <img class="img" :src="EnumBG.BC1" > 立即查询
  </view>

  <fui-picker :layer="3" :options="options" :show="show" @change="change" @cancel="show = false"></fui-picker>
  <LandscapeModel v-model:show="landShow" :sonFun="sonFun"/>
</template>

<script setup lang="ts">
import {  EnumBG } from "@/utils/content";
import LandscapeModel from "@/components/Landscape/LandscapeModel.vue";
import { EnumStatus } from "@/utils/constants";
import { birthday } from "@/utils/ab";
const sizeStatus = ref(false)
const content = ref("请选择你的生日")
const show = ref(false)
const landShow  = ref(false)
const options = ref()
const selectData = ref([])
const emit = defineEmits(['update:defStatus','update:content'])
const startTimer = () => {
    setInterval(() => {
        sizeStatus.value =  !sizeStatus.value
    }, 1000); // 每秒执行一次
  };

  const change =(e:any)=>{
    content.value = `${e.value[0]}年${e.value[1]}月${e.value[2]}日`
    selectData.value = e.value
    show.value = false
  }
  const landShowUpdate = ()=>{
    if(selectData.value.length < 1){
      uni.showToast({
        title:'请选择生日',
        icon:'none'
    })
      return
    }
    landShow.value = true
  }

  const defData = ()=>{
    const year = Array.from({length: 2024 - 1900 + 1}, (_, index) => 2024 - index);
    const mo = Array.from({length: 12}, (_, index) => index + 1);
    const days = Array.from({length: 31}, (_, index) => index + 1);
    options.value = [year,mo,days]
  }

  const sonFun = async()=>{
    const data =  await birthday(selectData.value[0],selectData.value[1],selectData.value[2])
    emit('update:defStatus',EnumStatus.RESULT)
    emit('update:content',data)
  }

onMounted(()=>{
      startTimer()

      defData()
  })

</script>

<style lang="scss" scoped>
.bi-content{
    z-index: 110;
    width: 60%;
    left: 20%;
    height: 80rpx;
    background-size: 100% 100%;
    position: absolute;
    top: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 33rpx;
    font-weight: bold;
}
.img{
    width: 45rpx;
    height: 45rpx;
    margin-right: 3rpx;
}
.bi-commit{
    z-index: 110;
    width: 50%;
    left: 25%;
    height: 90rpx;
    background-size: 100% 100%;
    position: absolute;
    top: 49%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 38rpx;
}
.bi-commit-big{
    width: 52%;
    left: 24%;
    height: 90rpx;
    top: 48.5%;
    transition: all 1s;
}
.bi-commit-small{
    width: 50%;
    left: 25%;
    height: 90rpx;
    top: 49%;
    transition: all 1s;
}
</style>
